我們今天要來介紹函式
函式 (function) 的用途是把會重複使用的程式碼封裝起來，未來想要用的時候隨時可以呼叫出來使用。

例如我們有一台機器人

想要讓它以後都能幫忙洗衣服，這時我們就要跟它說洗衣服會有哪些步驟：

1. 把髒衣服的洗衣籃拿到洗衣機旁邊
2. 從洗衣籃把髒衣服拿出來並放到洗衣機內
3. 加入洗衣精、柔軟精
4. 按下洗衣機的開始鍵

有指令後機器人就會知道該怎麼去做洗衣服這件事，但每天都要洗衣服的話，每次都要輸入這麼多指令感覺有點麻煩，這時我們就可以用函式把這些步驟通通裝進一個指令就好：

function 洗衣服(){
1. 把髒衣服的洗衣籃拿到洗衣機旁邊
2. 從洗衣籃把髒衣服拿出來並放到洗衣機內
3. 加入洗衣精、柔軟精
4. 按下洗衣機的開始鍵
}

這時我們就得到了一個封裝好的指令：「洗衣服」
以後要叫機器人去洗衣服的時候，只要輸入一個指令「洗衣服」，它就知道該怎麼做囉。

如何寫函式

我們一樣用機器人洗衣服寫一段範例程式碼來了解函式的結構：

function washCloth(quantity){
    if(quantity>20){
        return 'doWash'
    }else{
        return 'dontWash'
    }
}

washCloth();

呼叫函式

要呼叫已經註冊的函式，只要寫出函式名稱跟後面的小括號就可以了：

washCloth();

特別要注意的是在呼叫 (call) 函式時，記得在後面加上小括號 ()，小括號的意思是「執行函式」，就算裡面沒帶有參數也要加上，才能成功呼叫函式。

註冊多組函式

註冊函式的數量沒有限制，同時間可以註冊多組函式

// 機器人-洗衣服
function washCloth(){
    console.log('把髒衣服丟進洗衣機');
    console.log('按開始');
}
washCloth();

// 機器人-倒垃圾
function cleanGarbage(){
    console.log('集中垃圾');
    console.log('拿去垃圾場倒');
}
cleanGarbage();

如上註冊了兩組函式後，之後輸入「洗衣服」或「倒垃圾」，機器人就知道該怎麼做囉。

函式裡面還可以執行函式

如果多組函式裡有重複執行的步驟，重複寫的話讓程式碼顯得重複又冗長，這時可以另外註冊一個函式負責執行重複的步驟並放到原本的函式裡，可以讓程式碼較簡潔

function morningAction(){
    console.log('起床');
    cleanHead();
    console.log('出門');
}

// 機器人-晚上活動

function nightAction(){
    console.log('回家');
    cleanHead();
    console.log('睡覺');
}

function cleanHead(){
    console.log('刷牙');
    console.log('洗臉');   
}

morningAction();
nightAction();

取自六角學院線上課程

參數

函式裡面最重要的功能之一，有了參數，函式不會每次都回傳相同結果，可以根據需求輸入參數後讓函式回傳對應的值

• 宣告一個函式並帶有參數 num

function armyNum(num){
    console.log(num);
}

armyNum(1); //1
armyNum(13); //13

• 可以帶多個參數

function armyNum(num, num2){
    console.log(num, num2);
}

armyNum(1,2); //1 2
armyNum(13,15); //13 15

• 參數只存活在大括號內

function armyNum(num, num2){
    console.log(num, num2);
    
    參數只拿來運作在函式大括號裡頭
}

armyNum(1,2); //1 2 
armyNum(13,15); //13 15

console.log(num); //在外面呼叫參數會被以為是變數，回傳undefined

• 參數練習 - 數字運算工具

function armyNum(num, num2){
    console.log(`軍隊的總數為${num+num2}`);
}

armyNum(100,51); //軍隊的總數為151

return 回傳值

在以上的例子有使用到 console.log() 來「印出」經過函式後得出來的值，但要注意的是使用 console.log()「印出」的值只是能被我們看到，但並沒有實際回傳值出來，此時如果呼叫這個函數，給的回傳會是 undefined

function armyNum(num, num2){
    console.log(`軍隊的總數為${num+num2}`);
}

console.log(armyNum()); //undefined

return 則可以實際地把函式運算出來的結果回傳值，並且中斷程式碼的執行 (在中斷後如果 return 後面還有程式碼，後面的程式碼將不會被執行)。該值可以在函式外賦予給變數做儲存使用。

function armyNum(num, num2){
    return `軍隊的總數為${num + num2}`
}

let UkraineArmy = armyNum(100,51);
console.log(UkraineArmy); //軍隊的總數為151

參考資料

線上課程
MDN
JavaScript 初心者筆記: 函式實際運作 - 回傳值與函式間互相傳遞

圖片來源：Unsplash